Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0] Improve mobile view of permissions #27670

Merged
merged 14 commits into from
Feb 18, 2020
Merged

Conversation

astridx
Copy link
Contributor

@astridx astridx commented Jan 27, 2020

Pull Request for Issue #27615 (comment) .

Summary of Changes

Show the columns in the permissions table below each other.

Testing Instructions

  1. Apply this patch and run npm ci.
  2. Open permissions on a small display.

My changes

Contacts  Options   test   Administration

Actual result

Contacts  Options   test   Administration(1)

Documentation Changes Required

left: -1111px;
}

.respTable td:before {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

::before

}

.respTable td:before {
float: left;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RTL?

}

.respTable td:nth-child(1) {
font-weight: bold;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

float: left;
padding: 0 2em 0 0;
content: attr(data-label) ":";
font-weight: bold;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


@include media-breakpoint-down(md) {
.respTable {
text-align: right;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RTL?

}

.oddCol {
background: $gray-100;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use background-color

@astridx
Copy link
Contributor Author

astridx commented Jan 27, 2020

@C-Lodder Thank you.
Please see if it's OK now.

@@ -0,0 +1 @@
/home/astrid/git/joomla-development/boilerplate/src/administrator/components/com_foos
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please don't hate me 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not hate you. I hate git. Why does git always do things that I don't want? It's quite clear that I don't want to commit foo components in this PR, right?

@@ -0,0 +1 @@
/home/astrid/git/joomla-development/boilerplate/src/components/com_foos
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

again ;)

@infograf768
Copy link
Member

This needs some more changes for RTL
Screen Shot 2020-01-30 at 12 10 46

@astridx
Copy link
Contributor Author

astridx commented Feb 14, 2020

Thanks to everyone who gave me tips. I have improved. This can now be tested again.
Is the <sup>2</sup> an error in the language file?
For me it looks like this:

تنظیمات کلی   admin   مدیریت

@infograf768
Copy link
Member

infograf768 commented Feb 16, 2020

Is the <sup>2</sup> an error in the language file?

Yep, it is.

@infograf768
Copy link
Member

I suggest some small modifications for joomla-tab.scss in order to be normalized compared to other scss.

    #permissions-sliders {
      section[active] {
        padding: 0 !important;

        @include media-breakpoint-down(md) {
          .respTable {
            [dir=ltr] & {
              text-align: right;
            }

            [dir=rtl] & {
              text-align: left;
            }
          }

          .respTable, .respTable thead, .respTable tbody, .respTable tr, .respTable th, .respTable td {
            display: block;
          }

          .respTable thead {
            position: absolute;
            top: -1111px;
            left: -1111px;
          }

          .respTable td::before {
            content: attr(data-label) ":";
            font-weight: $bold-weight;

            [dir=ltr] & {
              float: left;
              padding: 0 2em 0 0;
            }

            [dir=rtl] & {
              float: right;
              padding: 0 0 0 2em;
            }
          }

          .respTable td:nth-child(1) {
            font-weight: $bold-weight;
          }

          .respTable td:last-child {
            border-bottom: 1em var(--atum-bg-dark-80) solid;
          }

          .oddCol {
            background: var(--atum-bg-light);
          }
        }
      }
    }
  }
}

@astridx
Copy link
Contributor Author

astridx commented Feb 16, 2020

@infograf768 I have changed it. I hope I've seen everything.

@infograf768
Copy link
Member

looks ok, will test tomorrow. :)

@infograf768
Copy link
Member

I have tested this item ✅ successfully on f41a4a0


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27670.

@N6REJ
Copy link
Contributor

N6REJ commented Feb 17, 2020

I have tested this item ✅ successfully on f41a4a0

works via pt 4 ( ci on )


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27670.

pt4

@alikon
Copy link
Contributor

alikon commented Feb 17, 2020

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27670.

@joomla-cms-bot joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Feb 17, 2020
@infograf768 infograf768 merged commit af78eed into joomla:4.0-dev Feb 18, 2020
@infograf768
Copy link
Member

Thanks.

@joomla-cms-bot joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Feb 18, 2020
@infograf768 infograf768 added this to the Joomla 4.0 milestone Feb 18, 2020
@astridx astridx deleted the acl branch August 9, 2020 12:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants